import * as React from "react";
import Popper from "popper.js";
import PropTypes from "prop-types";

/**
 * 下拉菜单组件
 * props: {
 *     btnContent: {ReactComponent|String} 按钮内容,
 *     btnClassName: {string} 按钮样式,
 *     children: {ReactComponent} 下拉菜单内容,
 *     className: {string} 组件样式类,
 *     style: {object} 组件样式,
 *     disabled: {boolean} 是否禁用
 * }
 */
export default class Dropdown extends React.Component{
    static propTypes = {
        btnContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
        btnClassName: PropTypes.string,
        children: PropTypes.element,
        className: PropTypes.string,
        style: PropTypes.object,
        disabled: PropTypes.bool
    };
    static defaultProps = {
        btnContent: "下拉按钮",
        children: [
            <span className="dropdown-item">1</span>,
            <span className="dropdown-item">2</span>,
            <span className="dropdown-item">3</span>,
            <span className="dropdown-item">4</span>,
            <span className="dropdown-item">5</span>,
        ]
    };

    constructor(props) {
        super(props);
        this.state = {
            dropdownMenuDisplay: false,
            dropdownMenuStyle: null
        }
    }

    /**
     * 装载完成时，绑定Popper
     */
    componentDidMount() {
        this.popper = new Popper(this.dropdownToggle, this.dropdownMenu, {
            placement: "bottom-start",
            onUpdate: data=>{
                let state = this.state;
                state.dropdownMenuStyle = data.style;
                this.setState(state);
            }
        });
    }

    /**
     * 显示下拉菜单
     */
    show(){
        let state = this.state;
        state.dropdownMenuDisplay = true;
        this.setState(state);
        this.popper.update();
    }

    /**
     * 隐藏下拉菜单
     */
    hide(){
        let state = this.state;
        state.dropdownMenuDisplay = false;
        this.setState(state);
    }

    /**
     * 按钮失去焦点处理
     */
    onBlurHandler(event){
        if(event.relatedTarget === this.dropdownMenu) return;
        this.hide();
    }

    //渲染
    render() {
        return <div className={"dropdown "+(this.props.className||"")} style={this.props.style}>
            <button
                type="button"
                className={this.props.btnClassName || "btn btn-outline-secondary dropdown-toggle"}
                onClick={this.props.disabled?null:this.show.bind(this)}
                onBlur={this.onBlurHandler.bind(this)}
                ref={btn=>this.dropdownToggle=btn}
                disabled={this.props.disabled}
            >
                {this.props.btnContent}
            </button>
            <div
                className={"dropdown-menu" + (this.state.dropdownMenuDisplay?" show":"")}
                style={Object.assign({outline: "none"}, this.state.dropdownMenuStyle)}
                ref={menu=>this.dropdownMenu=menu}
                onClick={this.hide.bind(this)}
                tabIndex={0}
            >
                {this.props.children}
            </div>
        </div>
    }
}
